<template>
  <div class="index">
    <div class="menus">
      <el-menu default-active="heros" :router="true">
        <el-menu-item index="/index/heros">英雄列表</el-menu-item>
        <el-menu-item index="/index/equipments">装备列表</el-menu-item>
        <el-menu-item index="/index/recommend">推荐出装</el-menu-item>
      </el-menu>
    </div>
    <div class="content">
        <router-view/>
    </div>
  </div>
</template>

<script setup>
</script>

<style lang="less">
.index {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    .menus {
        width: 10%;
        // background-color: yellow; /* 这行可保留作为不支持渐变浏览器的备用色 */
        // background-image: linear-gradient(to bottom, white, rgb(215, 18, 126));
    }
    .content {
        width: 90%;
        background-color: skyblue; /* 这行可以保留，用于兼容不支持渐变的浏览器，作为备用颜色 */
        background-image: linear-gradient(to right, lightblue, rgb(21, 147, 220));
    }
}
</style>